<template>
  <div class="search">
    <Card>
      <Form
        ref="searchForm"
        @keydown.enter.native="handleSearch"
        :model="searchForm"
        inline
        :label-width="70"
        class="search-form"
      >
        <Form-item label="商品名称" prop="spuName">
          <Input
            type="text"
            v-model="searchForm.spuName"
            placeholder="请输入商品名称"
            clearable
            style="width: 200px"
          />
        </Form-item>

        <Form-item label="商品编号" prop="spuId">
          <Input
            type="text"
            v-model="searchForm.spuId"
            placeholder="请输入商品编号"
            clearable
            style="width: 200px"
          />
        </Form-item>

        <Form-item label="商品分类" prop="cateLogId">
          <CateCascader
            @selected="selectedCateInAdd"
            :key="new Date().getTime()"
            :cateId="searchForm.cateLogId"
            style="width: 200px"
          />
        </Form-item>

        <Form-item label="商品品牌" prop="brandId">
          <Select v-model="searchForm.brandId" filterable style="width: 200px">
            <Option
              v-for="item in brandList"
              :value="item.brandId"
              :key="item.brandId"
              >{{ item.name }}</Option
            >
          </Select>
        </Form-item>

        <Form-item label="审核状态" prop="reviewStatus">
          <Select
            v-model="searchForm.reviewStatus"
            filterable
            style="width: 200px"
          >
            <Option
              v-for="item in reviewStatus"
              :value="item.key"
              :key="item.key"
              >{{ item.value }}</Option
            >
          </Select>
        </Form-item>

        <Form-item label="上架状态" prop="publishStatus">
          <Select
            v-model="searchForm.publishStatus"
            filterable
            style="width: 200px"
          >
            <Option
              v-for="item in publishStatus"
              :value="item.key"
              :key="item.key"
              >{{ item.value }}</Option
            >
          </Select>
        </Form-item>

        <Button
          @click="handleSearch"
          class="search-btn"
          type="primary"
          icon="ios-search"
          >搜索</Button
        >
      </Form>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        class="mt_10"
      >
        <template #productImg="{ row }">
          <div class="demo-upload-list" style="height: 100px">
            <img
              :src="row.spuImg"
              style="height: 100px; margin-top: 3px; width: 100px"
            />
            <!-- <Image  :src="row.showImg" :fit="fit" width="100px" height="100px" :alt="fit" /> -->
            <div class="demo-upload-list-cover">
              <Icon
                type="ios-eye-outline"
                @click="handleViewGoodsPicture(row)"
              ></Icon>
            </div>
          </div>
        </template>
        <template #reviewStatus="{ row }">
          <Tag color="gold" v-show="row.reviewStatus == 2">审核中</Tag>
          <Tag color="success" v-show="row.reviewStatus == 1">通过</Tag>
          <Tag color="error" v-show="row.reviewStatus == 0">拒绝</Tag>
        </template>
        <template #publishStatus="{ row }">
          <Tag color="success" v-show="row.publishStatus == 1">上架</Tag>
          <Tag color="error" v-show="row.publishStatus == 0">下架</Tag>
        </template>
        <template #action="{ row }">
          <Button type="warning" size="small" @click="toEditSpu(row)"
            >编辑</Button
          >
          <Button style="margin-left: 10px" size="small" @click="showStock(row)"
            >库存</Button
          >
          <Button
            type="success"
            size="small"
            style="margin-left: 10px"
            v-show="
              row.reviewStatus != 2 &&
              row.reviewStatus != 0 &&
              row.publishStatus != 1
            "
            @click="spuUp(row)"
            >上架</Button
          >
          <Button
            type="primary"
            size="small"
            style="margin-left: 10px"
            v-show="row.publishStatus == 1"
            @click="spuOFF(row)"
            >下架</Button
          >
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <Modal title="View Image" v-model="goodsPictureVisible">
      <img
        :src="previewGoodsPicture"
        v-if="goodsPictureVisible"
        style="width: 100%"
      />
    </Modal>
    <Modal
      title="更新库存"
      v-model="updateStockModalVisible"
      :mask-closable="false"
      :width="1500"
    >
      <Tabs value="updateStock">
        <TabPane label="库存详情" name="updateStock">
          <Table
            class="mt_10"
            :columns="updateStockColumns"
            :data="stockList"
            border
          >
            <template #skuStock="{ index }">
              <Input v-model="stockList[index].skuStock" />
            </template>
            <template #skuImg="{ row }">
              <div class="demo-upload-list" style="height: 100px">
                <img
                  :src="row.skuImg"
                  style="height: 100px; margin-top: 3px; width: 100px"
                />
                <!-- <Image  :src="row.showImg" :fit="fit" width="100px" height="100px" :alt="fit" /> -->
                <div class="demo-upload-list-cover">
                  <Icon
                    type="ios-eye-outline"
                    @click="handleViewGoodsPicture1(row)"
                  ></Icon>
                </div>
              </div>
            </template>
            <template #action="{ row, index }">
              <Button type="primary" @click="editSkuStock(row, index)"
                >修改库存</Button
              >
            </template>
          </Table>
        </TabPane>
      </Tabs>
    </Modal>
  </div>
</template>

<script>
import CateCascader from '@/views/my-componts/CateCascader.vue';
import * as APIBrand from '@/api/myapi/Brand.js';
import * as APISpu from '@/api/myapi/Spu.js';
import * as ApiWare from '@/api/myapi/Ware.js';
export default {
  name: 'good-spu',
  components: { CateCascader },
  data() {
    return {
      loading: true, // 表单加载状态
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: 'create_time', // 默认排序字段
        order: 'desc', // 默认排序方式
      },
      data: [], // 表单数据
      total: 0, // 表单数据总数
      brandList: [],
      // 根据审核状态查询
      reviewStatus: [
        {
          key: 0,
          value: '未通过',
        },
        {
          key: 1,
          value: '通过',
        },
        {
          key: 2,
          value: '审核中',
        },
      ],
      // 根据上架状态查询
      publishStatus: [
        {
          key: 0,
          value: '下架',
        },
        {
          key: 1,
          value: '上架',
        },
      ],
      // 表格的列
      columns: [
        {
          title: '商品编号',
          key: 'id',
          minWidth: 200,
          tooltip: true,
        },
        {
          title: '商品名称',
          key: 'spuName',
          minWidth: 140,
          tooltip: true,
        },

        {
          title: '商品图片',
          slot: 'productImg',
          minWidth: 110,
        },
        {
          title: '商品分类',
          key: 'cateName',
          minWidth: 120,
          align: 'center',
          tooltip: true,
        },
        {
          title: '商品品牌',
          key: 'brandName',
          minWidth: 120,
          align: 'center',
          tooltip: true,
        },
        {
          title: '审核状态',
          slot: 'reviewStatus',
          minWidth: 120,
          align: 'center',
          tooltip: true,
        },
        {
          title: '上架状态',
          slot: 'publishStatus',
          minWidth: 120,
          align: 'center',
          tooltip: true,
        },
        {
          title: '操作',
          slot: 'action',
          minWidth: 80,
        },
      ],
      // 图片展示框是否可用
      goodsPictureVisible: false,
      // 展示的图片的地址
      previewGoodsPicture: '',
      // 修改库存是否课件
      updateStockModalVisible: false,
      // 库存详情表格的列数据
      updateStockColumns: [
        {
          title: '商品编号',
          key: 'skuId',
        },
        {
          title: '商品名称',
          key: 'skuName',
          width: 300,
        },
        {
          title: '库存数量',
          slot: 'skuStock',
          width: 150,
        },
        {
          title: '商品图片',
          slot: 'skuImg',
          align: 'center',
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center',
        },
      ],
      // 库存详情表格的数据
      stockList: [],
    };
  },
  methods: {
    init() {
      // 初始化数据
      this.getDataList();
      this.getBrandList();
    },
    getDataList() {
      console.log('测试查询参数', this.searchForm);
      APISpu.getSpuByPage(this.searchForm).then((res) => {
        this.loading = false;
        if (res.data.code == 201) {
          this.data = res.data.obj.records;
          this.total = parseInt(res.data.obj.total);
        }
      });
    },
    changePage(v) {
      // 改变页码
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      // 改变每页数量
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    handleSearch() {
      // 搜索
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    // 分类选择
    selectedCateInAdd(item) {
      let arr = item[0];
      this.searchForm.cateLogId = arr[2];
    },
    // 获取品牌
    getBrandList() {
      APIBrand.getAllBrand().then((res) => {
        if (res.data.code == 201) {
          this.brandList = res.data.obj;
        }
      });
    },
    // 图片展示框处理
    handleViewGoodsPicture(item) {
      this.goodsPictureVisible = true;
      this.previewGoodsPicture = item.spuImg;
    },
    // 图片展示框处理1
    handleViewGoodsPicture1(item) {
      this.goodsPictureVisible = true;
      this.previewGoodsPicture = item.skuImg;
    },
    // 跳转去编辑Spu页面
    toEditSpu(row) {
      this.$router.push({
        name: 'edit-spu',
        query: { id: row.id },
      });
    },
    // 展示库存对话框
    showStock(row) {
      this.updateStockModalVisible = true;
      this.getSkuStock(row.id);
    },
    // 获取spu的库存信息
    getSkuStock(id) {
      APISpu.getSpuStock(id).then((res) => {
        if (res.data.code == 201) {
          this.stockList = res.data.obj;
        }
      });
    },
    // 修改库存
    editSkuStock(row, index) {
      console.log('row', row);
      let params = {
        skuId: row.skuId,
        skuStock: this.stockList[index].skuStock,
      };
      console.log('测试修改库存参数:', params);
      ApiWare.editSkuWare(params).then((res) => {
        if (res.data.code == 201) {
          this.$Message.success('更新库存成功');
          this.updateStockModalVisible = false;
        } else {
          this.$Message.error('更新库存失败');
        }
      });
    },
    // spu上传
    spuUp(row) {
      console.log('点击商品上传:', row);
      this.$Modal.confirm({
        title: '商品上架',
        content: '您确定要将' + row.spuName + '上架吗?',
        onOk: () => {
          APISpu.productUp(row.id).then((res) => {
            if (res.data.code == 201) {
              this.$Message.success('商品上传成功');
              this.getDataList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
      });
    },
    // spu下架
    spuOFF(row) {
      this.$Modal.confirm({
        title: '商品上架',
        content: '您确定要将' + row.spuName + '上架吗?',
        onOk: () => {
          APISpu.productOFF(row.id).then((res) => {
            if (res.data.code == 201) {
              this.$Message.success('商品下架成功');
              this.getDataList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.demo-upload-list {
  display: inline-block;
  width: 160px;
  height: 150px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  margin: 20 20px;
}
</style>
